<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>注册账号</title>
    <link media="all" rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link media="all" rel="stylesheet" th:href="@{/css/public.css}"/>

    <!-- 引入公共的 图标 -->
    <th:block th:replace="commonmenu::favicon"></th:block>

    <!-- 自定义样式 -->
    <style>
        .user-form-card {
            max-width: 800px;
            margin: 20px auto;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
        }

        .user-avatar-area {
            text-align: center;
            margin: 20px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .user-avatar {
            width: 150px;
            height: 150px;
            border: 4px solid #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .layui-table-view {
            margin-top: 20px;
        }

        .layui-input-group {
            display: flex;
            align-items: center;
        }

        .layui-input-group-addon {
            padding: 0 15px;
            border-right: 1px solid #e2e2e2;
            border-radius: 4px 0 0 4px;
            background: #f8f9fa;
            min-width: 40px;
            text-align: center;
        }

        .layui-input-group .layui-input {
            border-left: none;
            border-radius: 0 4px 4px 0;
        }

        .layui-form-label-new {
            display: block;
            font-weight: 600;
            padding: 5px;
            text-align: right;
        }

        .layui-table-container {
            margin: 0 auto; /* 水平居中 */
            max-width: 800px; /* 最大宽度 */
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .user-form-card {
                margin: 10px;
                border-radius: 0;
            }

            .layui-table thead {
                display: none;
            }

            .layui-table tr {
                display: block;
                margin-bottom: 15px;
                padding: 15px;
                background: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }

            .layui-table td {
                display: block;
                text-align: left;
                padding: 8px 0;
            }
        }
    </style>

</head>
<body class="background-info">
<!-- register.html 中的返回登录链接 -->
<h2 style="padding: 20px 20px 0px 20px;"><b><a th:href="@{/toLogin}">已有账号？立即登录</a></b></h2>
<div class="layui-container">
    <div class="layui-card user-form-card">
        <div class="layui-card-header">
            <h2 class="layui-card-title">用户注册表单</h2>
            <p class="layui-card-desc">请填写以下信息完成注册</p>
        </div>
        <div class="layui-card-body">
            <form method="post" class="layui-form layui-table-view" id="registerForm" enctype="multipart/form-data">
                <!-- 头像上传区域 -->
                <div class="layui-upload user-avatar-area">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img layui-circle user-avatar" id="userFace"
                             src="/images/default.jpeg">
                        <input id="imgPath" name="imgPath" type="hidden">
                    </div>
                    <p class="layui-text-small" style="font-size: 10px;color: red">温馨提示：该头像为默认头像将用于个人中心展示，如果需要修改头像请注册后，在个人中心修改</p>
                </div>
                <!-- 表单表格 -->
                <center>
                    <table class="layui-table layui-table-border layui-table-hover" lay-skin="line">
                        <tbody>
                        <!-- 用户名 -->
                        <tr>
                            <td>
                                <div class="layui-form-label-new">用户名：</div>
                            </td>
                            <td>
                                <div class="layui-input-group">
                                    <input class="layui-input" name="username" placeholder="请输入用户名"                                            lay-verify="username" type="text">
                                    <span class="layui-input-group-addon">
                                        <i class="layui-icon layui-icon-username"></i>
                                    </span>
                                </div>
                            </td>
                        </tr>

                        <!-- 密码 -->
                        <tr>
                            <td>
                                <div class="layui-form-label-new">密码：</div>
                            </td>
                            <td>
                                <div class="layui-input-group">
                                    <input class="layui-input" name="password" id="password" placeholder="请输入密码（6-16位）"
                                           lay-verify="password" type="password">
                                    <span class="layui-input-group-addon">
                                        <i class="layui-icon layui-icon-password"></i>
                                    </span>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="layui-form-label-new">确认密码：</div>
                            </td>
                            <td>
                                <div class="layui-input-group">
                                    <input class="layui-input" name="confirmPassword" id="confirmPassword" placeholder="请再次输入密码（6-16位）"
                                           lay-verify="password" type="password">
                                    <span class="layui-input-group-addon">
                                        <i class="layui-icon layui-icon-password"></i>
                                    </span>
                                </div>
                            </td>
                        </tr>

                        <!-- 姓名 -->
                        <tr>
                            <td>
                                <div class="layui-form-label-new">姓名：</div>
                            </td>
                            <td>
                                <div class="layui-input-group">
                                    <input class="layui-input" name="name" placeholder="请输入真实姓名" type="text">
                                    <span class="layui-input-group-addon">
                                        <i class="layui-icon layui-icon-user"></i>
                                    </span>
                                </div>
                            </td>
                        </tr>

                        <!-- 性别 -->
                        <tr>
                            <td >
                                <div class="layui-form-label-new">性别：</div>
                            </td>
                            <td>
                                <div class="layui-form-radio" style="display: flex; gap: 20px;">
                                    <input checked name="sex" title="男" type="radio" value="1">
                                    <input name="sex" title="女" type="radio" value="0">
                                </div>
                            </td>
                        </tr>

                        <!-- 年龄 -->
                        <tr>
                            <td>
                                <div class="layui-form-label-new">年龄：</div>
                            </td>
                            <td>
                                <div class="layui-input-group">
                                    <input class="layui-input" name="age" placeholder="请输入年龄" type="number">
                                    <span class="layui-input-group-addon">
                                        <i class="layui-icon layui-icon-time"></i>
                                    </span>
                                </div>
                            </td>
                        </tr>

                        <!-- 手机号 -->
                        <tr>
                            <td>
                                <div class="layui-form-label-new">手机号：</div>
                            </td>
                            <td>
                                <div class="layui-input-group">
                                    <input class="layui-input" lay-verify="phone" name="phone" placeholder="请输入手机号"
                                           type="tel">
                                    <span class="layui-input-group-addon">
                                        <i class="layui-icon layui-icon-cellphone"></i>
                                    </span>
                                </div>
                            </td>
                        </tr>

                        <!-- 身份证 -->
                        <tr>
                            <td>
                                <div class="layui-form-label-new">身份证：</div>
                            </td>
                            <td>
                                <div class="layui-input-group">
                                    <input class="layui-input" lay-verify="idCard" name="idCard" placeholder="请输入身份证号"
                                           type="text">
                                    <span class="layui-input-group-addon">
                                        <i class="layui-icon layui-icon-camera"></i>
                                    </span>
                                </div>
                            </td>
                        </tr>

                        <!-- 住址 -->
                        <tr>
                            <td>
                                <div class="layui-form-label-new">住址：</div>
                            </td>
                            <td>
                                <div class="layui-input-group">
                                    <input class="layui-input" name="address" placeholder="请输入详细住址" type="text">
                                    <span class="layui-input-group-addon">
                                        <i class="layui-icon layui-icon-home"></i>
                                    </span>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 操作按钮 -->
                    <div class="layui-form-item">
                        <div style="margin-top: 15px">
                            <button class="layui-btn layui-btn-lg layui-btn-normal" id="getDataRegisterBtn">
                                <i class="layui-icon layui-icon-rate-solid"></i> 立即注册
                            </button>
                            <button class="layui-btn layui-btn-lg layui-btn-secondary" type="reset">
                                <i class="layui-icon layui-icon-refresh-3"></i> 重置表单
                            </button>
                        </div>
                    </div>
                </center>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/layui/layui.js}" type="text/javascript"></script>

<script type="text/javascript">
    layui.use(['form', 'layer', 'jquery'], function () {

        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;

        form.render(); // 初始化表单（必须在 layui.use 内部）

        // 表单验证规则
        // form.verifyRules({
        //     username: [/^[\w\u4e00-\u9fa5]{3,12}$/, '用户名长度3-12位（汉字/字母/数字）']
        //     , password: [/^[\S]{6,16}$/, '密码长度6-16位，不能包含空格']
        //     , phone: [/^1[3-9]\d{9}$/, '手机号格式不正确']
        //     , idCard: [/^\d{17}[\dXx]$/, '身份证号格式不正确']
        // });

        // 表单验证规则对象（必须放在点击事件处理函数之前）
        var verifyRules = {
            username: /^[\w\u4e00-\u9fa5]{3,12}$/,
            password: /^[\S]{6,16}$/,
            phone: /^1[3-9]\d{9}$/,
            idCard: /^\d{17}[\dXx]$/
        };


        // 监听按钮点击事件
        $('#getDataRegisterBtn').on('click', function (e) {
            e.preventDefault(); // 阻止表单默认提交

            // 【关键】打印原始表单数据（逐个字段检查）
            /*console.log('【原始表单数据】', {
                username: $("input[name='username']").val(),
                password: $("input[name='password']").val(),
                name: $("input[name='name']").val(),
                sex: $("input[name='sex']:checked").val(), // 处理单选框
                age: $("input[name='age']").val(),
                phone: $("input[name='phone']").val(),
                idCard: $("input[name='idCard']").val(),
                address: $("input[name='address']").val(),
                imgPath: $("#imgPath").val()
            })*/

            // 获取原始表单数据
            var data = {
                username: $("input[name='username']").val(),
                password: $("input[name='password']").val(),
                password: $("input[name='confirmPassword']").val(),
                name: $("input[name='name']").val(),
                sex: $("input[name='sex']:checked").val(), // 处理单选框
                age: $("input[name='age']").val(),
                phone: $("input[name='phone']").val(),
                idCard: $("input[name='idCard']").val(),
                address: $("input[name='address']").val(),
                imgPath: $("#imgPath").val()
            }

            // 验证必填字段
            if (!data.username ||!data.password ||!data.name ||!data.sex ||!data.age ||!data.phone ||!data.idCard) {
                layer.msg('必填字段不能为空，请检查输入！', {icon: 5});
                return;
            }

            // 验证字段格式
            if (!verifyRules.username.test(data.username)) {
                layer.msg('用户名长度3 - 12位（汉字/字母/数字）', {icon: 5});
                return;
            }
            if (!verifyRules.password.test(data.password)) {
                layer.msg('密码长度6 - 16位，不能包含空格', {icon: 5});
                return;
            }
            if (!verifyRules.phone.test(data.phone)) {
                layer.msg('手机号格式不正确', {icon: 5});
                return;
            }
            if (!verifyRules.idCard.test(data.idCard)) {
                layer.msg('身份证号格式不正确', {icon: 5});
                return;
            }

            if (document.password !== document.confirmPassword) {
                layer.msg('两次输入的密码不一致', {
                    icon: 5,
                    time: 1500
                });
                return false;
            }

            // console.log('【前端表单数据检测】', data);

            // 1. 关闭所有已有弹窗（避免重复）
            layer.closeAll();

            // 2. 显示加载提示
            var index = layer.msg('提交中，请稍候...', {icon: 16, shade: 0.8});

            // 3、提交数据到后台
            $.ajax({
                url: "/register",
                type: "post",
                contentType: "application/json", // 指定 JSON 格式
                data: JSON.stringify(data), // 序列化表单数据为 JSON

                success: function (res) {
                    layer.close(index); // 关闭加载

                    // 4. 处理响应
                    layer.msg(res.msg, {
                        time: 2000 // 自动关闭
                    });

                    if (res.code === 200) {
                        // 清空表单
                        $('#registerForm')[0].reset();
                        // 头像重置
                        $('#userFace').attr('src', '/images/default.jpeg');
                        $('#imgPath').val('');

                        // 询问是否立即登录
                        layer.confirm('注册成功！是否返回登录页，立即登录', {
                            btn: ['是', '否']
                        }, function () {
                            // 等待1秒后返回登录页
                            setTimeout(function () {
                                window.location.href = '/toLogin';
                                layer.msg("请等待1秒...")
                            }, 1000);
                        }, function () {
                            // 点击否，不做处理，留在注册页
                        });
                    }
                },
                error: function (xhr, status, error) {
                    if (status === '405') {
                        alert('服务器不支持请求的HTTP方法');
                    }
                }
            });
        });

        //提交个人资料注册
        /*form.on("submit(register)", function (data) {
            // 1. 关闭所有已有弹窗（避免重复）
            layer.closeAll();

            // 2. 显示加载提示
            var index = layer.msg('提交中，请稍候...', { icon: 16, shade: 0.8 });
            console.log(data.field);
            // 3. 发送AJAX请求
            $.ajax({
                url: "/register/add",
                type: "post",
                data: data.field,
                contentType: "application/json",
                dataType: 'json',
                success: function (res) {
                    layer.close(index); // 关闭加载

                    // 4. 处理响应
                    layer.msg(res.msg, {
                        time: 2000 // 自动关闭
                    });

                    if (res.code === 200) {
                        // 清空表单
                        $('#registerForm')[0].reset();
                        // 头像重置
                        $('#userFace').attr('src', '/images/default-avatar.png');
                        $('#imgPath').val('');

                        // 询问是否立即登录
                        layer.confirm('注册成功！是否返回登录页，立即登录', {
                            btn: ['是', '否']
                        }, function () {
                            // 等待1秒后返回登录页
                            setTimeout(function () {
                                window.location.href = '/toLogin';
                            }, 1000);
                        }, function () {
                            // 点击否，不做处理，留在注册页
                        });
                    }
                },
                error: function (xhr, status, error) {
                    if (status === '405') {
                        alert('服务器不支持请求的HTTP方法');
                    }
                }
            });

            // 6. 阻止表单默认提交（核心修复）
            return false;
        });*/
    })
</script>

</body>
</html>